import React from 'react';
import { Card, Tag, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { TaskCardProps } from '../types';
import { TaskStatus } from '../constants';
import styles from './index.less';

const TaskCard: React.FC<TaskCardProps> = ({ task, onTerminate, onDetail }) => {
  // 处理"强行终止"按钮点击
  const handleTerminate = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
    onTerminate(task.id);
  };

  // 处理"详情"按钮点击
  const handleDetail = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation();
    onDetail(task.id);
  };

  return (
    <div className={styles['task-card']}>
      {/* 卡片头部 */}
      <div className={styles['card-header']}>
        <div className={styles['card-tag']}>
          <PlusOutlined className={styles['card-tag-icon']} />
          <span>{task.type}</span>
        </div>
      </div>
      
      {/* 卡片内容 */}
      <div className={styles['card-content']}>
        <div className={styles['card-title']}>{task.name}</div>
        {task.id.includes('-') && (
          <div className={styles['card-id']}>{task.id}</div>
        )}
        
        <div className={styles['card-info']}>
          <div className={styles['info-item']}>
            <span className={styles['info-label']}>流程发起人：</span>
            <span>{task.initiator}</span>
          </div>
          <div className={styles['info-item']}>
            <span className={styles['info-label']}>发起时间：</span>
            <span>{task.initiateTime}</span>
          </div>
          <div className={styles['info-item']}>
            <span className={styles['info-label']}>步骤名称：</span>
            <span>{task.currentStep}</span>
          </div>
          <div className={styles['info-item']}>
            <span className={styles['info-label']}>当前处理人：</span>
            <span>{task.currentHandler}</span>
          </div>
        </div>
        
        <Tag className={styles['status-tag']} color="blue">
          {task.status}
        </Tag>
      </div>
      
      {/* 卡片底部 */}
      <div className={styles['card-footer']}>
        <div className={styles['card-team']}>
          {task.team && `所属团队：${task.team}`}
        </div>
        <div className={styles['btn-group']}>
          <Button 
            size="small" 
            className={styles['btn']} 
            onClick={handleTerminate}
          >
            强行终止
          </Button>
          <Button 
            size="small" 
            className={styles['btn']} 
            onClick={handleDetail}
          >
            详情
          </Button>
        </div>
      </div>
    </div>
  );
};

export default TaskCard; 